<h1>G Path</h1>

<p><a style="font-size: 22px;" href="<?=base_url('public/downloads/g.path/g.path-1.1.min.rar')?>">Download G Path 1.1</a> 
    - <a href="<?=base_url('public/downloads/g.path/g.path-1.1.min.zip')?>">.zip</a></p>

<p>G Path is a Javascript library that helps you with URL hashing. You can use this for Ajax based
websites etc. It also has great history and bookmark support for IE6+, but also has a great routing engine!</p>

<h1>Installation</h1>

<p>You need to include 2 scripts, in order to let this library work. The library itself and jQuery (1.3+). We use jQuery
so we have a good history and bookmark support. The library itself is based on native Javascript.
Your page will look something like this:</p>

<div class="code">
<?php highlight_string('<html>
    <head>
        <title>G Path</title>
        <!-- Make sure you load jQuery first! -->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/g.path-1.1.min.js"></script>
        <script type="text/javascript">
            // Your G Path code here...
            $(document).ready(function() {
                G.Path.root(\'#/home\');
                
                G.Path.route(\'gebruikers/kaas\', \'users/appel\');
                G.Path.route(\'gebruikers\', \'users\');
                
                G.Path.listen(function(a, b, c) {
                    console.log(\'Controller:\', a);
                    console.log(\'Action:\', b);
                    console.log(\'Parameters:\', c);
                });
            });
        </script>
    </head>
    <body>
        <!-- Hello -->
    </body>
</html>
'); ?>
</div>

<p>A nice thing, is that it has a routing engine build in. So you can route url's to other controllers.
Below I will give an example:</p>

<div class="code">
G.Path.route(':any', 'pages/$1');
</div>

<p>What this actually says, is that everything after "#/" will be translated to:
<ul>
    <li>Controller: pages</li>
    <li>Action: whatever is after #/ in the URL</li>
</ul>

<p>With this functionality, you can do alot of stuff, maybe you want your links to be in Dutch, 
but your code is in English. You just simply do this:</p>

<div class="code">
G.Path.route('gebruikers', 'users');<br />
G.Path.route('klanten/:any', 'customers/$1');
</div>

<br />
<br />

<h2>Setting up your listener</h2>
<p>To setup your listener, you need to call the <strong>listen()</strong> method. This method
accepts one parameter, which is an anonymous function. This function has three parameters: 
<strong>controller</strong>, <strong>action</strong>, <strong>params</strong>. The <strong>params</strong> parameter
will always be an array. Here is an example:</p>

<div class="code">
<?php highlight_string('G.Path.listen(function(controller, action, params) {
    // Do whatever you want. Maybe make an Ajax call and get some content?
    $.ajax({
        url: controller + \'/\' + action,
        data: {
            params: params
        },
        success: function(r) {
            $("#content").html(r.content);
        }
    });
});'); ?>
</div>

<br />
<br />

<h2>Set the root URL</h2>
<p>If you want to navigate to an hash on page load, you can set a root property:</p>

<div class="code">
G.Path.root('#/home');
</div>

<p>When the page loads, the URL will automatically change to: <strong>http://example.com/#/home</strong> and executes the listener.</p>

</p>